<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>班级管理</title>
    <link rel="icon" type="image/x-icon" href="/img/favicon.jpg"/>
</head>
<!-- jquery-->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="/css/pure/pure-min.css">
<link rel="stylesheet" href="/css/index.css">

<!-- Dialog -->
<link rel="stylesheet" href="/css/pure/Dialog.css">
<script src="/js/pure/Dialog.js"></script>
<script src="/js/index.js"></script>
<link rel="stylesheet" href="/css/pure/Button.css">

<style>

</style>
<body>

<!--导航栏-->
<div th:replace="common :: navbar"></div>
<!--中部统计数据-->
<div th:replace="common :: boxbar"></div>

<p th:if="${user.role == 2}" style="margin-left: 10%;text-align: left;color: grey">
    <a   href="/modelList" class="p_button" >教学模块</a>
    <a  href="/myClass" class="p_button" style="color: #2a80eb" >我的班级</a>
    <a  href="/teacher/lesson"  class="p_button" >我的课程</a>
    <a  onclick="createClass()"  class="p_button  button-warning pure-button" style="margin-left: 60%; background-color: #f59b00" >新建班级</a>
</p>
<p th:if="${user.role == 3}" style="margin-left: 10%;text-align: left;color: grey">
    <a href="/student/myLearn" class="p_button">我的课程</a>
    <a th:if="${user.role == 3}"  style="color: #2a80eb"  href="/myClass" class="p_button" >班级列表</a>
</p>

<section class="lesson_box">
    <table class="pure-table pure-table-horizontal" style="width: 100%">
        <thead>
        <tr>
            <th>序号</th>
            <th>班级名称</th>
            <th>任课老师</th>
            <th>创建时间</th>
            <th>学生数</th>
            <th>课程数</th>
            <th>操作</th>
        </tr>
        </thead>

        <tbody>
        <tr th:each="info,infoStat : ${page.list}">
            <td  th:text="${infoStat.index}"></td>
            <td  th:text="${info.name}"></td>
            <td  th:text="${info.userName}"></td>
            <td th:text="${#dates.format(info.createTime,'yyyy-MM-dd HH:mm:ss')}" ></td>
            <td  th:text="${info.studentNum}"></td>
            <td  th:text="${info.lessonNum}"></td>

            <td th:if="${(user.role == 3) && (user.classId == null)  }">
                <a class="button-warning pure-button"  th:onclick="joinClass([[${info.id}]],[[${info.name}]])">加入</a>
            </td>
            <td th:if="${user.role ==2 }">
                <a class="pure-button "  th:onclick="checkClassLesson([[${info.id}]],[[${info.name}]])">查看课程</a>
                <a class="pure-button "  th:onclick="checkClassStudent([[${info.id}]],[[${info.name}]])">查看学生</a>
                <a class="pure-button "  th:onclick="contactClass2Lesson([[${info.id}]],[[${info.name}]])">关联课程</a>
            </td>
<!--            <td th:if="${(user.role == 2)}">-->
<!--                <a class="button-warning pure-button"  th:onclick="contactClass2Lesson([[${info.id}]],[[${info.name}]])">关联课程</a>-->
<!--            </td>-->
        </tr>
        </tbody>
    </table>

</section>

<!-- 底部分页 -->
<!-- 底部分页 -->
<form id="form" style="display: flex;justify-content: center" action="/myClass" type="POST">
    当前页  （<a  th:text="${page.currentPage+1}"  />）
    <a style="color: #2a80eb" onclick="loadPage(- 1)" th:if="${page.currentPage > 0}">上一页</a>
    <a style="color: #2a80eb"  onclick="loadPage(1)" th:if = "${page.currentPage < (page.totalPage - 1)}">下一页</a>
    共      <a style="color: #f59b00"  th:text="${page.total}" />条|
    <a style="color: #f59b00"  th:text="${page.totalPage}" />页
    每页    <a style="color: #f59b00"  th:text="${page.pageSize}" />条

    <input type="hidden" name="pageSize" th:value="${page.pageSize}" />
    <input name="currentPage" id="currentPage" type="hidden" th:value="${page.currentPage}"  />
    <input name="flag" id="flag" type="hidden" value="0"   />
</form>


<script>
    // function createClass() {
    //     var myname = prompt("请输入班级名称");
    //     if(myname == null || myname.trim() == ''){
    //         alert("请输入班级名称");
    //     }else{
    //         alert("已创建班级："+myname);
    //     }
    //
    // }
    function createClass() {
        new Dialog({
            title: '新建班级',
            content: '<h6>班级名称</h6>' +
                '<input style="font-size: 18px;" id="name" placeholder = "班级名称" class="ui-input">' ,
            buttons: [{
                events: function (event) {
                    // 按钮禁用
                    // event.dialog是当前实例对象
                    console.log(event)
                    console.log(event.type)
                    if(event.type){
                        console.log(document.getElementById("name").value);
                    }
                    var data = "";
                    data = data + "name="+document.getElementById("name").value;
                    console.log(data);
                    sendJump("/yxClass/insert","/myClass",data);
                    event.dialog.remove();
                }
            }, {}]
        });
    }
    function joinClass(classId,name) {
        var c = confirm("加入班级"+name+"?");
        if(!c){
            console.log("cancel...")
            return;
        }
        var data = "";
        data = data + "classId="+classId;
        sendJump("/student/joinClass","/student/myLearn",data);
    }
    function checkClassLesson(classId,name,formId,flag) {
        var data = "classId="+classId+"&className="+name;
        if(formId){
            data = $("#"+formId).serialize();
            console.log(data);
        }else{
            data = "classId="+classId+"&className="+name;
        }
        if(flag){
            data = data +"&flag="+flag;
        }

        var url  = "/teacher/classLessonList";

        jumpDialog(url,data,name+"的课程");
    }


    function checkClassStudent(classId,name,formId) {
        var url  = "/teacher/classStudentList";
        var data = "classId="+classId+"&className="+name;
        if(formId){
            data = $("#"+formId).serialize();
            console.log(data);
        }

        jumpDialog(url,data,name+"的课程");
    }
    function contactClass2Lesson(classId,name) {
        var selectHtml = "";
        //创建异步对象
        var xhr = new XMLHttpRequest();
        //设置请求的类型及url
        xhr.open('post', "/lesson/lessonList",true);
        //post请求一定要添加请求头才行不然会报错
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //发送请求
        // FirstName=Bill&LastName=Gates
        var data = "classId="+classId;
        xhr.send(data);
        xhr.onreadystatechange = function () {
            // 这步为判断服务器是否正确响应
            if (xhr.readyState == 4 && xhr.status == 200) {
                var re = JSON.parse(xhr.responseText);
                if(re.code == 200 ){
                    var list = re.data;
                    for(var i = 0 ;i< list.length;i++){
                        var item = list[i];
                        selectHtml = selectHtml + "<option value="+item.id+">"+item.name+"</option>";
                    }
                    alertD(classId,selectHtml);
                }else{
                    new Dialog().alert(re.msg+"!", {
                        type: 'failure'
                    });
                }
            }
        };


    }
    function alertD(classId,html) {
        console.log(html);
        new Dialog({
            title: '选择要关联的课程',
            content:
                '课程名称：<select name="lessonId" style="font-size: 18px;" id="lessonId"   class="ui-input">' +
                html+
                '</select>' ,
            buttons: [{
                events: function (event) {
                    // 按钮禁用
                    // event.dialog是当前实例对象
                    console.log(event)
                    console.log(event.type)
                    // if(event.type){
                    //     console.log(document.getElementById("name").value);
                    // }
                    var data = "";
                    data = data + "classId="+classId;
                    data = data + "&lessonId="+ document.getElementById("lessonId").value;
                    console.log(data);
                    sendJump("/classLesson/insert","/myClass",data);
                    event.dialog.remove();
                }
            }, {}]
        });
    }



    //课程列表中的启用 ，以为你弹窗不加载js,所以放这里，放父类js中。
    function activeLesson(id,name) {
        var msg = confirm("是否开启课程:"+name);
        if(msg){
            sendJump("teacher/activeLesson","myClass","id="+id);
        }
    }
    function removeStudentClass(id,name) {
        var msg = confirm("是否将学生:"+name+"移除此班级？");
        if(msg){
            sendJump("teacher/removeStudentClass","myClass","id="+id);
        }
    }
</script>

</body>
</html>